<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:#fff;height: 80px;">
        <!--头部-->
        <el-row :gutter="20" style="width: 1200px;margin: 0 auto;">
         <el-col :span="6">
           <!--头部logo图片,点击logo跳转至http://localhost:8080/index-->
           <router-link to="/">
             <img src="/imgs/icon.png" width="200px">
           </router-link>
         </el-col>
         <el-col :span="10">
            <!--头部导航栏-->
           <el-menu @select="handleSelect" mode="horizontal" active-text-color="orange" style="height:70px;">
             <el-menu-item index="1">食谱</el-menu-item>
             <el-menu-item index="2">视频</el-menu-item>
             <el-menu-item index="3">资讯</el-menu-item>
           </el-menu>
         </el-col>
         <el-col :span="6">
            <!--头部搜索框-->
            <el-input placeholder="请输入您要搜索的内容" style="margin-top: 25px;">
              <template #append>
                <!--注意:此图标必须在下方的JS代码中导入！-->
                <el-button :icon="Search"></el-button>
              </template>
            </el-input>
         </el-col>
         <el-col :span="2">
            <!--设置气泡卡片-->
           <el-popover title="欢迎访问烘焙坊">
             <template #reference>
               <router-link to="/personal">
                 <el-icon size="25" color="#666" style="margin-top:30px;"><User/></el-icon>
               </router-link>
             </template>
             <div style="text-align: center;">
               <el-button type="info" size="small">注册</el-button>
               <el-button type="warning" size="small">登录</el-button>
             </div>
           </el-popover>
         </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <!--共有的尾部区域-->
      <el-footer style="background-color: rgb(50,50,50);color:#666;
       height: 300px;padding: 50px;text-align: center;">
        <div style="width: 1200px;margin: 0 auto">

        </div>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>
//此处导入的是头部搜索框中的放大镜图标
import {Search} from '@element-plus/icons-vue'
</script>
